<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Card</h1>
        <p>Card is a flexible container component.</p>
    </div>
</div>

<div class="content-section implementation">
    <p-card header="Simple Card" [style]="{'width': '25rem', 'margin-bottom': '2em'}">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
    </p-card>

    <p-card header="Advanced Card" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
        <ng-template pTemplate="header">
            <img alt="Card" src="assets/showcase/images/usercard.png">
        </ng-template>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
        <ng-template pTemplate="footer">
            <p-button label="Save" icon="pi pi-check"></p-button>
            <p-button label="Cancel" icon="pi pi-times" styleClass="p-button-secondary" [style]="{'margin-left': '.5em'}"></p-button>
        </ng-template>
    </p-card>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;CardModule&#125; from 'primeng/card';
</app-code>

            <h5>Getting Started</h5>
            <p>Card is defined with p-card element.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-card&gt;
    Content
&lt;/p-card&gt;
</app-code>
            <h5>Header</h5>
            <p>Header text of the card is provided using the <i>header</i> property, optionally <i>subheader</i> property is available for additional information about the card.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-card header="header"&gt;
    Content
&lt;/p-card&gt;
</app-code>

            <h5>Header and Footer Content</h5>
            <p>Header and Footers sections can be customized using <i>p-header</i> and <i>p-footer</i> components.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-card&gt;
    &lt;p-header&gt;
        Header content here
    &lt;/p-header&gt;
    Body Content
    &lt;p-footer&gt;
        Footer content here
    &lt;/p-footer&gt;
&lt;/p-card&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Title of the card.</td>
                        </tr>
                        <tr>
                            <td>subheader</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Secondary title of the card.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-card</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-card-header</td>
                            <td>Title element.</td>
                        </tr>
                        <tr>
                            <td>p-card-subheader</td>
                            <td>Subtitle element.</td>
                        </tr>
                        <tr>
                            <td>p-card-content</td>
                            <td>Content of the card.</td>
                        </tr>
                        <tr>
                            <td>p-card-footer</td>
                            <td>Footer of the card.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/card" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>
        <a href="https://stackblitz.com/edit/primeng-card-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
            <span>Edit in StackBlitz</span>
        </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-card header="Simple Card" [style]="&#123;'width': '25rem', 'margin-bottom': '2em'&#125;"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;img alt="Card" src="assets/showcase/images/usercard.png"&gt;
    &lt;/ng-template&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
&lt;/p-card&gt;

&lt;p-card header="Advanced Card" subheader="Card Subheader" [style]="&#123;width: '360px'&#125;" styleClass="p-card-shadow"&gt;
    &lt;p-header&gt;
        &lt;img alt="Card" src="assets/showcase/images/usercard.png"&gt;
    &lt;/p-header&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
    &lt;ng-template pTemplate="footer"&gt;
        &lt;p-button label="Save" icon="pi pi-check"&gt;&lt;/p-button&gt;
        &lt;p-button label="Cancel" icon="pi pi-times" styleClass="p-button-secondary [style]="&#123;'margin-left': '.5em'&#125;""&gt;&lt;/p-button&gt;
    &lt;/ng-template&gt;
&lt;/p-card&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-card-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
